<template>
  <!-- 添加或修改菜单对话框 -->
  <!-- custom-class
       form 弹窗 默认必加--------------------------------------------------------
       dialogForm            =>  默认控制样式区域 管理部分公用样式
       form 弹窗 按布局格式添加 --------------------------------------------------
       dialogFormItemUDForm  =>  控制 form-item (label 、content) 上下布局样式 控制
       dialogFormItemLRForm  =>  控制 form-item (label 、content) 左右布局样式 控制
  -->
  <el-dialog v-loading="dialogFormLoading" :title="dialogFormTitle" custom-class="dialogForm dialogFormItemUDForm" :visible.sync="dialogFormVisibleBool" width="600px" :show-close="false">
    <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormType!=='view'?dialogRules:{}"
             :class="dialogFormType==='view'?'formTable p-px-t-14':'p-px-t-4'" :label-width="dialogFormType==='view'?(4* 1.4 + 1.2 + 1.2 + 'rem' ):''">
      <el-row class="formRow" :gutter="dialogFormType==='view'?0:24">
        <el-col v-if="dialogForm.menuType!=='F'" :span="24">
          <el-form-item label="顶级模块">
            <el-select v-model.trim="dialogForm.systemCode" filterable>
              <el-option v-for="(item,index) in menuModuleList" :key="index" :label="item.modelName"
                         :value="item.modelCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级菜单">
            <treeselect v-model.trim="dialogForm.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model.trim="dialogForm.menuType">
              <el-radio label="M">目录</el-radio>
              <el-radio label="C">菜单</el-radio>
              <el-radio label="F">按钮</el-radio>
              <el-radio label="D">导航栏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="dialogForm.menuType != 'F' ">
          <el-form-item label="布局类型">
            <el-select v-model="dialogForm.layoutType" placeholder="请选择布局类型">
              <el-option
                v-for="item in sysLayoutTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="dialogForm.menuType != 'F'" label="菜单图标">
            <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
              <IconSelect ref="iconSelect" @selected="selected" />
              <el-input slot="reference" v-model.trim="dialogForm.icon" placeholder="点击选择图标" readonly>
                <svg-icon v-if="dialogForm.icon" slot="prefix" :icon-class="dialogForm.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
              </el-input>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model.trim="dialogForm.menuName" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
            <!-- <el-input-number v-model.trim="dialogForm.orderNum" controls-position="right" :min="0" /> -->
            <el-input
              v-model.trim="dialogForm.orderNum"
              v-input.float="{'float':0,'min':0,'max':999}"
              placeholder="请输入显示排序"
              @focus="focusNumBerFun($event)"
              @blur="blurNumBerFun($event,0,dialogForm,'orderNum')"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dialogForm.menuType != 'F'" label="是否外链">
            <el-radio-group v-model.trim="dialogForm.isFrame">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dialogForm.menuType != 'F'" label="路由地址" prop="path">
            <el-input v-model.trim="dialogForm.path" placeholder="请输入路由地址" />
          </el-form-item>
        </el-col>
        <el-col v-if="dialogForm.menuType == 'C'" :span="12">
          <el-form-item label="组件路径" prop="component">
            <el-input v-model.trim="dialogForm.component" placeholder="请输入组件路径" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dialogForm.menuType != 'M'&&dialogForm.menuType != 'D'" label="权限标识">
            <el-input v-model.trim="dialogForm.perms" placeholder="请权限标识" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="dialogForm.menuType != 'M'&&dialogForm.menuType != 'D'&&dialogForm.menuType != 'F'" label="父级路径">
            <el-input v-model.trim="dialogForm.parentPath" placeholder="请输入父级路径" maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dialogForm.menuType != 'F'" label="显示状态">
            <el-radio-group v-model.trim="dialogForm.visible">
              <el-radio v-for="dict in sysShowHideOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dialogForm.menuType != 'F'" label="菜单状态">
            <el-radio-group v-model.trim="dialogForm.status">
              <el-radio v-for="dict in sysNormalDisableOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dialogForm.menuType != 'F' && dialogForm.menuType != 'D'" label="是否栏目">
            <el-radio-group v-model.trim="dialogForm.isColumn">
              <el-radio v-for="dict in sysYesNoOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dialogForm.menuType == 'C'" label="是否缓存">
            <el-radio-group v-model.trim="dialogForm.isCache">
              <el-radio label="0">缓存</el-radio>
              <el-radio label="1">不缓存</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogSubmitForm">确 定</el-button>
      <el-button @click="dialogResetFormMixins">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// api
import { methodGetApi } from '@/api/publicApi'
// 混入
import { dialogFormMixins } from '@/mixins/publicMixins/dialogFormMixins'
// 组件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/publicComponents/IconSelect'
// -------------------------------------------------------------
export default {
  name: 'MenuDialog',
  mixins: [dialogFormMixins],
  components: { Treeselect, IconSelect },
  data() {
    return {
      // 表单参数
      dialogForm: {},
      // 顶级模块
      menuModuleList: [],
      // 菜单树选项
      menuOptions: [],
      // 表单校验
      dialogRules: {
        menuName: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '路由地址不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    this.getDictMixins('sysShowHideOptions', 'sys_show_hide')
    this.getDictMixins('sysNormalDisableOptions', 'sys_normal_disable')
    this.getDictMixins('sysYesNoOptions', 'sys_yes_no')
    this.getDictMixins('sysLayoutTypeOptions', 'sys_layout_type')
    this.getMenuModule()
  },
  mounted() {
  },
  methods: {
    // 顶级模块数据
    getMenuModule() {
      methodGetApi('/system/config/listByTitleConfig').then(res => {
        this.menuModuleList = res.data
        // this.dialogForm.systemCode = res.data[this.menuModuleList.length-1].modelCode
      })
    },
    // 选择图标
    selected(name) {
      this.dialogForm.icon = name
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      }
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      const menu = { menuId: 0, menuName: '主类目', children: [] }
      this.getTreeSelectMixins('menuOptions', '/system/menu/list', {}, 'menuId', menu)
    },
    // 显示状态字典翻译
    visibleFormat(row, column) {
      if (row.menuType === 'F') {
        return ''
      }
      return this.selectDictLabel(this.sysShowHideOptions, row.visible)
    },
    /**
     * @description: 重新打开弹窗是赋初始值
     * @Author: baoxuhui
     * @return {*}
     */
    dialogResetForm() {
      this.dialogForm = {
        menuId: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: 'M',
        orderNum: undefined,
        isFrame: '1',
        isColumn: 'N',
        isCache: '0',
        visible: '0',
        status: '0'
      }
      this.resetForm('dialogForm')
    },
    /**
    * @description: 保存
    * @Author: baoxuhui
    * @return {*}
    */
    dialogSubmitForm() {
      console.log(this.dialogForm)
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          let url = null; let type = null
          // if (this.dialogForm.menuType !== 'F') {
          //   this.dialogForm.systemCode = 'SYSTEM_CENTER'
          // }
          if (this.dialogForm.menuId !== undefined) {
            url = '/system/menu/edit'
            type = '修改'
          } else {
            url = '/system/menu'
            type = '新增'
          }
          this.dialogSaveOrUpdateMixins(url, this.dialogForm, type)
        }
      })
    },

    /**
     * @description: 调取详情
     * @Author: baoxuhui
     * @return {*}
     */
    dialogDetailApi(row) {
      const url = '/system/menu/' + row.menuId
      this.dialogGetDetailMixins(url)
    },
    /**
     * @description: 详情回显
     * @Author: baoxuhui
     * @param {*} res
     * @return {*}
     */
    dialogFormDetail(res) {
      const data = res.data
      this.dialogForm = data
      this.dialogFormLoading = false
    }

  }
}
</script>
